<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>throttle</title>
</head>
<body>
    <h2>throttle</h2>
    <p>
        节流的原理：每次触发事件的时候，每隔相应的时间，只执行一次该事件。
    </p>
    <button id="btn">点击</button>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <script>
        function fn1 () {
            console.log('雪国')
        }
        // 使用时间戳，将当前时间减去上一次时间，如果大于间隔时间就执行，前执行
      function throttle (fn,wait) {
        var time = 0
          return function () {
            var contxt = this
            var args = arguments
            var nowData = +new Date()
            if( nowData  - time > wait ) {
                fn.apply(contxt,arguments)
                time = nowData
            }
          }
      }

    // 设置一个定时器，如果定时器存在就不执行，直到定时器执行，并执行完函数，定时器变为null，设定新的定时器。后执行
    // function throttle (fn,wait) {
    //     var timeout
    //     return function () {
    //         var context = this
    //         var args =  arguments
    //         if(!timeout) {
    //             timeout = setTimeout(function () {
    //                 fn.apply(context,args)
    //                timeout = null
    //             },wait)
    //         }
    //     }
    // }

    // function throttle (fn,wait) {
    //   let timeout = 0
    //   return function () {
    //     var newDate  = +new Date()
    //     var context = this
    //     var args = arguments
    //     if( newDate - timeout > wait ) {
    //       fn.apply(this,arguments)
    //       timeout = newDate
    //     }
    //   }
    // }
      var btn = document.getElementById('btn')
      btn.addEventListener('click',throttle(fn1,2000))
    </script>
</body>
</html>